<template>
    <div class="common-size adminOffice_useAge">
        <page-head :pageHead="pageHeadData"></page-head>
        <div class="page-content">
            <div class="page-chart page-chart1">
                <div ref="useAgeDom" class="chart-box">

                </div>
                <div class="top-left-name axis-name">第一象限</div>
                <div class="top-right-name axis-name">第二象限</div>
                <div class="bottom-left-name axis-name">第三象限</div>
                <div class="bottom-right-name axis-name">第四象限</div>
            </div>
            <div class="describe_box">
                <div class="describe-text" v-html="item" v-for="(item, index) in textData">
                </div>
            </div>
        </div>
        <page-footer :pageFooter="pageFooterData"></page-footer>
    </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import {nuxtMixins} from '../assets/javascript/mixin'
  let echarts = require('echarts')
  let {ecStat} = require('../assets/javascript/ecStat')
  export default {
    name: 'adminOffice_useAge',
    props: ['chartData'],
    mixins: [nuxtMixins],
    data() {
      return {
        pageTitle: '科室多维分析',
        detailTitle: '使用年限分析'
      }
    },
    computed:{
      oneRemarkData () {
        return this.chartData.remark
      },
      chartDataTable () {
        return this.chartData.chartData
      },
      textData () {
        return this.chartData.textData
      }
    },
    created() {
    },
    mounted() {
      this.deviceNumChart()
    },
    methods: {
      deviceNumChart () {
        const color = [
          {
            start: '#F9E8A0',
            end: '#F2CB2D'
          },
          {
            start: '#9EC3E8',
            end: '#508CCA'
          },
          {
            start: '#A8D49D',
            end: '#72BE72'
          },
          {
            start: '#F9C991',
            end: '#F08C65'
          }
        ]
        const chartDatas = this.chartData.chartData
        if (!chartDatas) {
          return false
        }
        const meansDatas = this.chartData.chartData.meansData
        let  useAgeData = []
        meansDatas.forEach((mean) => {
          useAgeData = useAgeData.concat(mean)
        })
        var clusterNumber = 4;
        var result = ecStat.clustering.hierarchicalKMeans(useAgeData, clusterNumber, false);
        var centroids = result.centroids;
        var ptsInCluster = result.pointsInCluster;
        var series = [];
        for (var i = 0; i < centroids.length; i++) {
          series.push({
            name: 'cluster' + i,
            type: 'scatter',
            data: meansDatas[i],
            symbolSize:12,
            itemStyle: {
              normal: {
                opacity: 0.8,
                color:{
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: color[i].start // 0% 处的颜色
                  }, {
                    offset: 1, color: color[i].end // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                }
              }
            },
            markLine : {
              symbol: ['', 'arrow'],
              lineStyle: {
                normal: {
                  color: '#666',
                  type: 'solid',
                  width:1,
                  opacity:0.4
                }
              },
              data : [
                {
                  xAxis: chartDatas.x_data.x_point,
                  label: {
                    normal: {
                      show:true,
                      textStyle: {
                        color:'#666',
                        fontSize: 14,
                        fontWeight: 200
                      },
                      formatter: (val) => {
                        return chartDatas.x_data.x_label
                      }
                    }
                  }
                },
                {
                  yAxis: chartDatas.y_data.y_point,
                  label: {
                    normal: {
                      show:true,
                      textStyle: {
                        color:'#666',
                        fontSize: 13,
                        fontWeight: 200
                      },
                      formatter: (val) => {
                        return chartDatas.y_data.y_label
                      }
                    }
                  }
                }
              ]
            }
          });
        }
        this.useAgeEchart = echarts.init(this.$refs.useAgeDom)
        this.useAgeEchart.setOption({
          title: {
            show: true,
            text: '*设备数量为0或使用年限缺失科室不计入统计',
            left: 'center',
            bottom: '3%',
            textStyle: {
              color: '#666',
              fontWeight: 400,
              fontSize:12
            }
          },
          legend: {
            data: []
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            }
          },
          grid: {
            top:'12.5%',
            left: '8%',
            right: '12%',
            bottom: '11%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisLine: {
              show:false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              show:false
            },
            axisTick: {
              show: false
            }
          },
          series: series
        });


      }
    },
    components: {
      PageFooter,
      pageHead
    }
  }
</script>

<style lang="scss">
    .adminOffice_useAge {
        .page-content {
            margin-top: 10px;
            h4 {
                color: #0a122d;
            }
            .page-chart {
                margin-bottom: 35px;
                position: relative;
                .chart-box {
                    width: 100%;
                    height: 100%;
                }
                .axis-name {
                    position: absolute;
                    font-size: 12px;
                    color: #666;
                    &.top-right-name {
                        top: -1%;
                        left: 11%;
                    }
                    &.top-left-name {
                        top: -1%;
                        right: 12%;
                    }
                    &.bottom-left-name {
                        bottom: 5%;
                        left: 11%;
                    }
                    &.bottom-right-name {
                        bottom: 5%;
                        right: 12%;
                    }
                }
            }
            .describe_box {
                .describe-text {
                    text-indent:0em !important;
                    color: #666;
                    font-size: 18px;
                    line-height: 32px;
                    margin-bottom:10px !important;
                    .paragraph-text {
                        text-indent:0em !important;
                    }
                    i {
                        width: 12px;
                        height: 12px;
                        border-radius: 100%;
                        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#C2B6D9), to(#7D76B6));
                        display: inline-block;
                        vertical-align: middle;
                        margin-right: 10px;
                    }
                    .icon1 {
                        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F9E8A0), to(#F2CB2D));
                    }
                    .icon2 {
                        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9EC3E8), to(#508CCA));
                    }
                    .icon3 {
                        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#A8D49D), to(#72BE72));
                    }
                    .icon4 {
                        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#F9C991), to(#F08C65));
                    }
                    span {
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>
